<template>
  <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''" v-if="imgType==1" :style="{'background': background,'backgroundSize':'100% 100%'}">
    <!-- <img :src="avatarSrc"> -->
  </div>
  <div class="avatar" v-else-if="imgType==3" :style="{'background': background,'backgroundSize':'100% 100%'}">
    <!-- <img :src="avatarSrc"> -->
  </div>
  <div class="avatar-div pri-hm" :class="classname" v-else-if="imgType==2">
    <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''" :style="{'background': background,'backgroundSize':'100% 100%'}">
      <!-- <img :src="avatarSrc"> -->
    </div>
    <slot></slot>
  </div>
  <div class="avatar-div" :class="classname" v-else>
    <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''" :style="{'background': background,'backgroundSize':'100% 100%'}">
      <!-- <img :src="avatarSrc"> -->
    </div>
    <slot></slot>
  </div>
</template>

<script>
import systemAvatar from '@/assets/image/system.png'
export default {
  props: {
    src: String,
    type: {
      type: String,
      default: 'C2C'
    },
    shape: {
      type: String,
      default: 'circle'
    },
    imgType: {
      type: Number,
      required: false,
      default: 0
    },
    classname: {
      type: String,
      required: false,
      default: ''
    }
  },
  computed: {
    background: function(){
       return 'url('+this.avatarSrc+') no-repeat center / cover'
    },
    avatarSrc: function () {
      let src = this.src
      if (/^(https:|http:|\/\/)/.test(src)) {
        return src
      } else {
        return this.defaultSrc
      }
    },
    defaultSrc: function () {
      switch(this.type) {
        case 'C2C':
          // 个人头像
          return 'https://webtest.miaomore.com/test/activity/common/images/one-img.png'
        case 'GROUP':
          // 群默认头像
          return 'https://webtest.miaomore.com/test/activity/common/images/one-img02.png'
        case this.TIM.TYPES.CONV_SYSTEM:
          return systemAvatar
        default:
          // 默认头像
          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-1.png'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-div{
  width: 1.04rem;
  height: 1.04rem;
  &.width-68{
    width: .906667rem;
    height: .906667rem;
  }
  &.width-96{
    width: 1.28rem;
    height: 1.28rem;
  }
  margin: 0 auto;
  padding: .053333rem;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 0px .08rem 0px rgba(0, 0, 0, 0.5);
  position: relative;
  &.pri-hm{
    box-shadow: 0px 0px .16rem 0px rgba(153, 127, 254, 1);
  }
  .icon-pri-chat{
    position: absolute;
    bottom: 0;
    right: -.2rem;
    width: .52rem;
    height: .52rem;
  }
}
.avatar{
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .213333rem;
  img{
    width: 100%;
    height: 100%;
    //不能被选择
    user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    
    //禁用系统默认菜单
    -webkit-touch-callout:none;
    -ms-touch-callout:none;
    -moz-touch-callout:none;
    touch-callout:none;
  }
  &.shape-circle{
    border-radius: 50%;
  }
}
</style>
